<template>
	<view class="page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<c-nav-bar :title="titleHeader"></c-nav-bar>
		<view class="list">
			<view class="position">
				<view class="left">
					<span class="green"></span>
					<span class="line"></span>
					<span class="red"></span>
				</view>
				<view class="right">
					<view class="top" @click="chooseBegin">
						<span style="margin-right: 20rpx;font-size: 28rpx;">起点</span>
						<u--input border="none" placeholderStyle="font-size:26rpx" placeholder="请输入岛内起始点"
							v-model="originAddress"></u--input>
						<span style="color: #a0a0a0;">></span>
					</view>
					<view class="right_bottom" @click="chooseEnd">
						<span style="margin-right: 20rpx;font-size: 28rpx;">终点</span>
						<u--input border="none" placeholderStyle="font-size:26rpx" placeholder="请输入岛内目的地"
							v-model="end"></u--input>
						<span style="color: #a0a0a0;">></span>
					</view>
				</view>
			</view>
			<view class="config">
				<view class="time" @click="chooseTime">
					<span>请选择出发时间</span>
					<span style="color: #a0a0a0;font-size: 28rpx;">></span>
				</view>
				<view class="driveNumber">
					<span>请选择乘车人数</span>
					<u-number-box button-size="36" v-model="driveNumberValue"></u-number-box>
				</view>
			</view>
			<view class="contactInfo">
				<view class="title">
					联系人信息
				</view>
				<view class="contactName">
					<span style="margin-right: 20rpx;font-size: 28rpx;">联系人姓名</span>
					<u--input border="none" placeholderStyle="font-size:26rpx" placeholder="请输入联系人姓名"
						v-model="contactName"></u--input>
				</view>
				<view class="contactPhone">
					<span style="margin-right: 20rpx;font-size: 28rpx;">联系人手机</span>
					<u--input border="none" placeholderStyle="font-size:26rpx" placeholder="请输入手机号码"
						v-model="contactPhone"></u--input>
				</view>
			</view>
			<view class="">

			</view>
		</view>
		<!-- 选择出发时间 -->
		<u-popup :show="show" closeable :closeOnClickOverlay="true" @close="close" @open="open" :overlayOpacity='0.3'>
			<view class="popupPage">
				<text class="title">请选择出发时间</text>
				<view class="mid">
					<view @click="chooseBeginTime" :class="['chooseTime',BeginTimeFlag?'chooseTimeSelected':'']">
						<text>最早出发时间</text>
						<text>{{beginDay}}日 <text style="margin: 0 10rpx;"> </text>{{beginHour}}:{{beginMinute}}</text>
					</view>
					<view class="line">

					</view>
					<view @click="chooseEndTime" :class="['chooseTime',EndTimeFlag?'chooseTimeSelected':'']">
						<text>最晚出发时间</text>
						<text>{{endDay}}日 <text style="margin: 0 10rpx;"> </text> {{endHour}}:{{endminute}}</text>
					</view>

				</view>

				<picker-view v-if="beginShow&&show" :indicator-style="indicatorStyle" :value="beginValue" @change="(e)=>{
						bindChange(e,1)
					}" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item}}点</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in min" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
				<picker-view v-if="endShow&&show" :indicator-style="indicatorStyle" :value="endValue" @change="(e)=>{
						bindChange(e,2)
					}" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in hours" :key="index">{{item}}点</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in min" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
				<view class="time" v-if="beginShow&&show&&endShow">
					{{beginDay}}{{beginHour}}{{beginMinute}}-{{endminute}} 出发
				</view>
				<view class="btn" @tap="quedingTime">
					确认
				</view>
			</view>
		</u-popup>
		<view class="bottom">
			<view class="btn" @tap="bookRightNow()">
				立即预订
			</view>
		</view>

	</view>
</template>

<script>
	import debounce from 'debounce'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				h: uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader: '驿蓝租车',
				earliestTime: '',
				latestTime: '',
				originLatitude: '',
				originLongitude: '',
				originAddress: '',
				end: '',
				endLatitude: '',
				endLongitude: '',
				beginDay: '',
				beginHour: '',
				beginMinute: '',
				endDay: '',
				endHour: '',
				endminute: '',
				years,
				year,
				months,
				month,
				days,
				day,
				title: 'picker-view',
				min: ['05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'],
				hours: [],
				days: [],
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				show: false,
				value1: '',
				beginValue: '',
				endValue: '',
				driveNumberValue: 1,
				contactName: '',
				contactPhone: '',
				beginShow: false,
				endShow: false,
				BeginTimeFlag: false,
				EndTimeFlag: false,
				value111: '',
				value222: '',
				endTime: ''
			}
		},
		mounted() {


		},
		onUnload() {
			uni.removeStorageSync("endSelected");
			uni.removeStorageSync("beginSelected");
		},
		onLoad(option) {
			const beginSelected = uni.getStorageSync("beginSelected");
			const endSelected = uni.getStorageSync("endSelected");
			// console.log(item, beginSelected, endSelected, 'option=====beginSelected,endSelected');
			// if (item.originAddress) {
			// 	this.originAddress = option.originAddress
			// 	this.originLatitude = option.originLatitude
			// 	this.originLongitude = option.originLongitude
			// 	console.log('进来1');
			// } 
			// else 
			if (beginSelected) {
				this.originAddress = beginSelected.mapOriginAddress
				this.originLatitude = beginSelected.mapOriginLatitude
				this.originLongitude = beginSelected.mapOriginLongitude
				console.log(this.originAddress, this.originLatitude, this.originLongitude, '有呜呜呜呜呜呜呜');
			}
			if (endSelected) {
				this.end = endSelected.end
				this.endLatitude = endSelected.endLatitude
				this.endLongitude = endSelected.endLongitude
				console.log(this.end, this.originLatitude, this.originLongitude, '有呜呜呜呜呜呜呜');
			}

		},
		created() {
			this.getFutureDates()
			this.generateHoursArray()

		},
		methods: {
			bookRightNow: debounce(async function() {
				if (!this.end) {
					uni.showToast({
						title: '请选择终点',
						icon: 'none'
					})
					return

				} else if (!this.originAddress) {
					uni.showToast({
						title: '请选择起点',
						icon: 'none'
					})
					return

				} else if (!this.contactName) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					})
					return

				} else if (!this.$reg.mobile(this.contactPhone)) {
					uni.showToast({
						title: '请输入正确的联系方式',
						icon: 'none'
					})
					return
				} else if (!this.endTime) {
					uni.showToast({
						title: '请输入最晚出发时间',
						icon: 'none'
					})
					return
				} else if (!this.beginTime) {
					uni.showToast({
						title: '请输入最早出发时间',
						icon: 'none'
					})
					return
				}
				let dataForm = {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					end: this.end,
					endLatitude: this.endLatitude,
					endLongitude: this.endLongitude,
					origin: this.originAddress,
					originLatitude: this.originLatitude,
					originLongitude: this.originLongitude,
					earliestTime: this.beginTime,
					latestTime: this.endTime,
					passengerName: this.contactName,
					passengerPhone: this.contactPhone,
					passengerNumber: this.driveNumberValue,
					type: 1
				}
				this.$api.post('/travel/travel/rentalcarylbmcarorder', dataForm).then(res => {
					console.log(res, 'eeeeeeeeeeeeeee');
					if (res.data.code == 0) {
						uni.navigateTo({
							url: '/pagesTaxi/Taxi/bookResult'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			}, 500),
			quedingTime() {
				this.close()
				// console.log(this.beginValue, this.endValue, '擦看时间');
			},
			generateHoursArray() {
				var hoursArray = [];

				for (var i = 1; i <= 24; i++) {
					if (i < 10) {
						var hourString = '0' + i; // 生成 '1点' 到 '24点' 的字符串
					} else {
						var hourString = i; // 生成 '1点' 到 '24点' 的字符串

					}
					hoursArray.push(hourString);
				}

				this.hours = hoursArray;
			},
			getFutureDates() {
				var currentDate = new Date(); // 获取当前日期
				var futureDates = [];

				for (var i = 0; i < 15; i++) {
					var futureDate = new Date();
					futureDate.setDate(currentDate.getDate() + i); // 设置未来日期

					var year = futureDate.getFullYear();
					var month = (futureDate.getMonth() + 1).toString().padStart(2, '0');
					var day = futureDate.getDate().toString().padStart(2, '0');

					var formattedDate = year + '-' + month + '-' + day;
					futureDates.push(formattedDate);
				}

				this.days = futureDates
			},
			chooseBeginTime() {
				this.BeginTimeFlag = true
				this.beginShow = true
				this.EndTimeFlag = false
				this.endShow = false
			},
			chooseEndTime() {
				this.EndTimeFlag = true
				this.BeginTimeFlag = false
				this.endShow = true
				this.beginShow = false
			},
			bindChange(e, type) {

				const val = e.detail.value
				switch (type) {
					case 1:
						this.beginDay = this.days[val[0]].substring(5)
						this.beginTime = this.days[val[0]] + ' ' + this.hours[val[1]] + ':' + this.min[val[2]] + ":" + '00'
						this.beginHour = this.hours[val[1]]
						this.beginMinute = this.min[val[2]]
						break
					case 2:
						this.endDay = this.days[val[0]].substring(5)
						this.endHour = this.hours[val[1]]
						this.endminute = this.min[val[2]]
						this.endTime = this.days[val[0]] + ' ' + this.hours[val[1]] + ':' + this.min[val[2]] + ":" + '00'
						break
				}
			},
			close(e) {
				this.show = !this.show


			},
			open() {},
			chooseTime(e) {
				this.show = !this.show
				this.BeginTimeFlag = true
				this.beginShow = true
				this.EndTimeFlag = false
				this.endShow = false

			},
			chooseBegin(e) {

				uni.navigateTo({
					url: '/pagesTaxi/Taxi/choosePosition',
					events: {
						addBeginPostionSuccess(data) {

							console.log(this.originAddress, this.originLatitude, this.originLongitude, 'hhhhh');
						},

					}
				})
			},
			chooseEnd(e) {

				uni.navigateTo({
					url: '/pagesTaxi/Taxi/choosePositionEnd',
					events: {
						addEndPostionSuccess(data) {
							this.end = data.myaddress
							this.endLatitude = data.latitude
							this.endLongitude = data.longitude
						},
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.picker-view {
		width: 750rpx;
		height: 600rpx;

	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.page {
		height: 100vh;
		background: #F5F8FA;
		position: relative;
		// padding-top: 130rpx;
	}

	.list {
		padding: 20rpx;
	}

	.position {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		.left {
			width: 10%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.green {
				display: inline-block;
				border: 9rpx solid green;
				width: 0rpx;
				height: 0rpx;
				border-radius: 14rpx;
			}

			.line {
				margin: 10rpx 0;
				border: 1rpx solid #e5e5e5;
				height: 40rpx;
				display: inline-block;
			}

			.red {
				display: inline-block;
				border: 9rpx solid red;
				width: 0rpx;
				height: 0rpx;
				border-radius: 14rpx;
			}
		}

		.right {
			width: 85%;
			padding: 8px 20rpx;

			.top {
				align-items: center;
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;
				border-bottom: 1rpx solid #e5e5e5;
			}

			&_bottom {
				align-items: center;
				padding: 20rpx 10rpx;
				display: flex;
				justify-content: space-between;

			}
		}
	}

	.config {
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		font-size: 28rpx;
		font-weight: 700;
		padding: 20rpx;

		.time {
			display: flex;
			align-items: center;
			padding: 26rpx 0;

			justify-content: space-between;
			border-bottom: 1rpx solid #e8e8e8;

		}

		.driveNumber {
			display: flex;
			align-items: center;
			padding: 26rpx 0;

			justify-content: space-between;
		}
	}

	.contactInfo {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;

		.title {
			font-size: 28rpx;
			font-weight: 700;
			padding: 20rpx 0;
		}

		.contactName {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

		}

		.contactPhone {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0;

		}
	}

	.bottom {
		background: #fff;
		position: fixed;
		height: 10%;
		display: flex;
		width: 100%;
		bottom: 0;

		.btn {
			background: #33AFFC;
			width: 70%;
			height: 80rpx;
			border-radius: 36rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			margin: auto;

		}
	}

	.popupPage {
		height: 1000rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}

		.btn {
			background: #33AFFC;
			width: 70%;
			height: 80rpx;
			border-radius: 81rpx;
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			margin: auto;

		}

		.mid {
			display: flex;
			margin-bottom: 30rpx;
			justify-content: center;
			align-items: center;

			.chooseTime {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 40rpx;
				font-size: 28rpx;

			}

			.chooseTimeSelected {
				color: #33AFFC;
			}

			.line {
				height: 50rpx;
				border-right: 1rpx solid #a0a0a0;
			}
		}

	}
</style>